<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>IP地址转换器 - 计算机网络工具</title>
    <style>
        /* 全局样式 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            line-height: 1.6;
            color: #333;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            padding: 20px;
        }
        
        .container {
            max-width: 1000px;
            margin: 0 auto;
            background-color: #fff;
            border-radius: 15px;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
            overflow: hidden;
        }
        
        header {
            background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
            color: white;
            padding: 30px;
            text-align: center;
        }
        
        h1 {
            font-size: 2.5rem;
            margin-bottom: 10px;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
        }
        
        .subtitle {
            font-size: 1.1rem;
            opacity: 0.9;
        }
        
        .content {
            padding: 30px;
        }
        
        .card {
            background-color: #f8f9fa;
            border-radius: 10px;
            padding: 25px;
            margin-bottom: 30px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        
        .ip-slot {
            background-color: #fff;
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 25px;
            border: 1px solid #e9ecef;
        }
        
        .ip-slot h3 {
            color: #495057;
            margin-bottom: 15px;
            font-size: 1.3rem;
        }
        
        .conversion-table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 15px;
        }
        
        .conversion-table th,
        .conversion-table td {
            padding: 12px 15px;
            text-align: center;
            border: 1px solid #dee2e6;
        }
        
        .conversion-table th {
            background-color: #343a40;
            color: white;
            font-weight: 600;
        }
        
        .conversion-table tr:nth-child(even) {
            background-color: #f8f9fa;
        }
        
        .conversion-table tr:hover {
            background-color: #e9ecef;
        }
        
        .card:hover {
            /* transform: translateY(-5px); */
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        }
        
        h2 {
            color: #2c3e50;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 2px solid #3498db;
            font-size: 1.8rem;
        }
        
        .form-group {
            margin-bottom: 20px;
        }
        
        label {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
            color: #555;
        }
        
        input[type="text"], input[type="number"] {
            width: 100%;
            padding: 12px 15px;
            border: 2px solid #ddd;
            border-radius: 6px;
            font-size: 16px;
            transition: border-color 0.3s ease;
        }
        
        input[type="text"]:focus, input[type="number"]:focus {
            outline: none;
            border-color: #3498db;
            box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
        }
        
        .input-group {
            display: flex;
            gap: 10px;
        }
        
        .input-group input[type="text"] {
            flex: 3;
        }
        
        .input-group input[type="number"] {
            flex: 1;
            max-width: 80px;
        }
        
        button {
            background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
            color: white;
            border: none;
            padding: 12px 25px;
            border-radius: 6px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            text-transform: uppercase;
            letter-spacing: 1px;
        }
        
        button:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(79, 172, 254, 0.4);
        }
        
        button:active {
            transform: translateY(0);
        }
        
        .result {
            margin-top: 25px;
            padding: 20px;
            background-color: #e8f4f8;
            border-radius: 8px;
            border-left: 4px solid #3498db;
        }
        
        .result h3 {
            color: #2980b9;
            margin-bottom: 15px;
            font-size: 1.3rem;
        }
        
        .result-item {
            margin-bottom: 12px;
            font-family: 'Courier New', Courier, monospace;
            font-size: 16px;
        }
        
        .binary-output {
            word-break: break-all;
            line-height: 1.8;
        }
        
        .network-part {
            font-weight: bold;
            color: #27ae60;
        }
        
        .host-part {
            text-decoration: underline;
            color: #e74c3c;
        }
        
        .copy-btn {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            padding: 8px 15px;
            font-size: 14px;
            margin-left: 10px;
        }
        
        .tabs {
            display: flex;
            margin-bottom: 20px;
            border-bottom: 2px solid #ddd;
        }
        
        .tab {
            padding: 12px 24px;
            background: none;
            border: none;
            cursor: pointer;
            font-size: 16px;
            font-weight: 600;
            color: #666;
            transition: all 0.3s ease;
            border-radius: 8px 8px 0 0;
            text-transform: none;
            letter-spacing: normal;
        }
        
        .tab.active {
            color: #3498db;
            background-color: #f8f9fa;
            border-bottom: 3px solid #3498db;
        }
        
        .tab-content {
            display: none;
        }
        
        .tab-content.active {
            display: block;
        }
        
        .info {
            background-color: #fff3cd;
            color: #856404;
            padding: 15px;
            border-radius: 6px;
            margin-bottom: 20px;
            border-left: 4px solid #ffc107;
        }
        
        .info-title {
            font-weight: bold;
            margin-bottom: 5px;
        }
        
        .conversion-buttons {
            display: flex;
            gap: 10px;
            margin-bottom: 20px;
        }
        
        .conversion-buttons button {
            flex: 1;
        }
        
        /* 响应式设计 */
        @media (max-width: 768px) {
            .container {
                margin: 10px;
                border-radius: 10px;
            }
            
            header {
                padding: 20px;
            }
            
            h1 {
                font-size: 2rem;
            }
            
            .content {
                padding: 20px;
            }
            
            .card {
                padding: 20px;
            }
            
            .input-group {
                flex-direction: column;
            }
            
            .input-group input[type="number"] {
                max-width: 100%;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>IP地址转换器</h1>
            <p class="subtitle">计算机网络学习辅助工具</p>
        </header>
        
        <div class="content">
            <div class="tabs">
                <button class="tab active" onclick="openTab(event, 'ip-tab')">IP地址转换</button>
                <button class="tab" onclick="openTab(event, 'number-tab')">进制转换</button>
            </div>
            
            <!-- IP地址转换标签内容 -->
            <div id="ip-tab" class="tab-content active">
                <div class="card">
                    <h2>IPv4地址与CIDR转换</h2>
                    <div class="info">
                        <div class="info-title">使用说明：</div>
                        <p>输入IPv4地址（如：192.168.1.1）和子网掩码位数（如：24），系统将为您展示转换结果，其中<strong>加粗部分表示网络地址</strong>，<u>下划线部分表示主机地址</u>。</p>
                    </div>
                    
                    <!-- IP地址转换槽位 -->
                    <div class="ip-slot">
                        <h3>转换槽位 1</h3>
                        <div class="form-group">
                            <label for="ip-address-1">IPv4地址</label>
                            <div class="input-group">
                                <input type="text" id="ip-address-1" placeholder="请输入IPv4地址，如：192.168.1.1" />
                                <input type="number" id="cidr-1" min="0" max="32" placeholder="CIDR" value="24" />
                            </div>
                        </div>
                        
                        <button onclick="convertIP(1)">转换</button>
                        
                        <div class="result" id="ip-result-1">
                            <h3>转换结果</h3>
                            <div class="result-item">
                                <strong>IP地址 + CIDR：</strong>
                                <span id="ip-cidr-1"></span>
                            </div>
                            <div class="result-item">
                                <strong>二进制表示：</strong>
                                <div id="binary-ip-1" class="binary-output"></div>
                            </div>
                            <div class="result-item">
                                <strong>子网掩码：</strong>
                                <span id="subnet-mask-1"></span>
                            </div>
                            <div class="result-item">
                                <strong>网络地址：</strong>
                                <span id="network-address-1"></span>
                            </div>
                            <div class="result-item">
                                <strong>广播地址：</strong>
                                <span id="broadcast-address-1"></span>
                            </div>
                            <div class="result-item">
                                <strong>可用主机地址范围：</strong>
                                <span id="host-range-1"></span>
                            </div>
                            <div class="result-item">
                                <strong>可用主机数量：</strong>
                                <span id="host-count-1"></span>
                            </div>
                        </div>
                    </div>
                    
                    <div class="ip-slot">
                        <h3>转换槽位 2</h3>
                        <div class="form-group">
                            <label for="ip-address-2">IPv4地址</label>
                            <div class="input-group">
                                <input type="text" id="ip-address-2" placeholder="请输入IPv4地址，如：10.0.0.1" />
                                <input type="number" id="cidr-2" min="0" max="32" placeholder="CIDR" value="8" />
                            </div>
                        </div>
                        
                        <button onclick="convertIP(2)">转换</button>
                        
                        <div class="result" id="ip-result-2">
                            <h3>转换结果</h3>
                            <div class="result-item">
                                <strong>IP地址 + CIDR：</strong>
                                <span id="ip-cidr-2"></span>
                            </div>
                            <div class="result-item">
                                <strong>二进制表示：</strong>
                                <div id="binary-ip-2" class="binary-output"></div>
                            </div>
                            <div class="result-item">
                                <strong>子网掩码：</strong>
                                <span id="subnet-mask-2"></span>
                            </div>
                            <div class="result-item">
                                <strong>网络地址：</strong>
                                <span id="network-address-2"></span>
                            </div>
                            <div class="result-item">
                                <strong>广播地址：</strong>
                                <span id="broadcast-address-2"></span>
                            </div>
                            <div class="result-item">
                                <strong>可用主机地址范围：</strong>
                                <span id="host-range-2"></span>
                            </div>
                            <div class="result-item">
                                <strong>可用主机数量：</strong>
                                <span id="host-count-2"></span>
                            </div>
                        </div>
                    </div>
                    
                    <div class="ip-slot">
                        <h3>转换槽位 3</h3>
                        <div class="form-group">
                            <label for="ip-address-3">IPv4地址</label>
                            <div class="input-group">
                                <input type="text" id="ip-address-3" placeholder="请输入IPv4地址，如：172.16.0.1" />
                                <input type="number" id="cidr-3" min="0" max="32" placeholder="CIDR" value="16" />
                            </div>
                        </div>
                        
                        <button onclick="convertIP(3)">转换</button>
                        
                        <div class="result" id="ip-result-3">
                            <h3>转换结果</h3>
                            <div class="result-item">
                                <strong>IP地址 + CIDR：</strong>
                                <span id="ip-cidr-3"></span>
                            </div>
                            <div class="result-item">
                                <strong>二进制表示：</strong>
                                <div id="binary-ip-3" class="binary-output"></div>
                            </div>
                            <div class="result-item">
                                <strong>子网掩码：</strong>
                                <span id="subnet-mask-3"></span>
                            </div>
                            <div class="result-item">
                                <strong>网络地址：</strong>
                                <span id="network-address-3"></span>
                            </div>
                            <div class="result-item">
                                <strong>广播地址：</strong>
                                <span id="broadcast-address-3"></span>
                            </div>
                            <div class="result-item">
                                <strong>可用主机地址范围：</strong>
                                <span id="host-range-3"></span>
                            </div>
                            <div class="result-item">
                                <strong>可用主机数量：</strong>
                                <span id="host-count-3"></span>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 常用IPv4十进制和二进制转换对照表 -->
                    <div class="card">
                        <h2>常用IPv4十进制和二进制转换对照表</h2>
                        <table class="conversion-table">
                            <tr>
                                <th>十进制</th>
                                <th>二进制</th>
                            </tr>
                            <tr>
                                <td>128</td>
                                <td>1000,0000</td>
                            </tr>
                            <tr>
                                <td>192</td>
                                <td>1100,0000</td>
                            </tr>
                            <tr>
                                <td>224</td>
                                <td>1110,0000</td>
                            </tr>
                            <tr>
                                <td>240</td>
                                <td>1111,0000</td>
                            </tr>
                            <tr>
                                <td>248</td>
                                <td>1111,1000</td>
                            </tr>
                            <tr>
                                <td>252</td>
                                <td>1111,1100</td>
                            </tr>
                            <tr>
                                <td>254</td>
                                <td>1111,1110</td>
                            </tr>
                            <tr>
                                <td>255</td>
                                <td>1111,1111</td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
            
            <!-- 进制转换标签内容 -->
            <div id="number-tab" class="tab-content">
                <div class="card">
                    <h2>二进制与十进制转换</h2>
                    <div class="info">
                        <div class="info-title">使用说明：</div>
                        <p>输入十进制或二进制数字，点击相应按钮进行转换。</p>
                    </div>
                    
                    <div class="form-group">
                        <label for="decimal-input">十进制输入</label>
                        <input type="text" id="decimal-input" placeholder="请输入十进制数字" />
                    </div>
                    
                    <div class="form-group">
                        <label for="binary-input">二进制输入</label>
                        <input type="text" id="binary-input" placeholder="请输入二进制数字（仅包含0和1）" />
                    </div>
                    
                    <div class="conversion-buttons">
                        <button onclick="decimalToBinary()">十进制 → 二进制</button>
                        <button onclick="binaryToDecimal()">二进制 → 十进制</button>
                        <button onclick="clearAll()">清除</button>
                    </div>
                    
                    <div class="result" id="number-result">
                        <h3>转换结果</h3>
                        <div class="result-item">
                            <strong>十进制：</strong>
                            <span id="decimal-result"></span>
                        </div>
                        <div class="result-item">
                            <strong>二进制：</strong>
                            <span id="binary-result"></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <script>
        // 标签页切换功能
        function openTab(evt, tabName) {
            // 隐藏所有内容
            const tabContent = document.getElementsByClassName("tab-content");
            for (let i = 0; i < tabContent.length; i++) {
                tabContent[i].classList.remove("active");
            }
            
            // 移除所有标签的active类
            const tabs = document.getElementsByClassName("tab");
            for (let i = 0; i < tabs.length; i++) {
                tabs[i].classList.remove("active");
            }
            
            // 显示当前标签内容并添加active类
            document.getElementById(tabName).classList.add("active");
            evt.currentTarget.classList.add("active");
        }
        
        // IP地址转换功能
        function convertIP(slotNumber = 1) {
            const ipInput = document.getElementById(`ip-address-${slotNumber}`).value;
            const cidrInput = parseInt(document.getElementById(`cidr-${slotNumber}`).value);
            
            // 验证IP地址和CIDR
            if (!validateIP(ipInput)) {
                alert("请输入有效的IPv4地址！");
                return;
            }
            
            if (isNaN(cidrInput) || cidrInput < 0 || cidrInput > 32) {
                alert("请输入有效的CIDR值（0-32）！");
                return;
            }
            
            // 处理IP地址和子网掩码
            const ipParts = ipInput.split('.').map(part => parseInt(part));
            const subnetMask = calculateSubnetMask(cidrInput);
            const networkAddress = calculateNetworkAddress(ipParts, subnetMask);
            const broadcastAddress = calculateBroadcastAddress(networkAddress, subnetMask);
            
            // 计算主机范围和数量
            const hostRange = calculateHostRange(networkAddress, broadcastAddress);
            const hostCount = calculateHostCount(cidrInput);
            
            // 生成二进制表示（带格式）
            const binaryIp = formatBinaryIP(ipParts, cidrInput);
            
            // 更新结果显示
            document.getElementById(`ip-result-${slotNumber}`).style.display = "block";
            document.getElementById(`ip-cidr-${slotNumber}`).textContent = `${ipInput}/${cidrInput}`;
            document.getElementById(`binary-ip-${slotNumber}`).innerHTML = binaryIp;
            document.getElementById(`subnet-mask-${slotNumber}`).textContent = subnetMask.join('.');
            document.getElementById(`network-address-${slotNumber}`).textContent = networkAddress.join('.');
            document.getElementById(`broadcast-address-${slotNumber}`).textContent = broadcastAddress.join('.');
            document.getElementById(`host-range-${slotNumber}`).textContent = hostRange;
            document.getElementById(`host-count-${slotNumber}`).textContent = hostCount;
        }
        
        // 验证IPv4地址
        function validateIP(ip) {
            const ipRegex = /^((25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;
            return ipRegex.test(ip);
        }
        
        // 计算子网掩码
        function calculateSubnetMask(cidr) {
            const subnet = [];
            for (let i = 0; i < 4; i++) {
                if (cidr >= 8) {
                    subnet.push(255);
                    cidr -= 8;
                } else {
                    subnet.push(256 - Math.pow(2, 8 - cidr));
                    cidr = 0;
                }
            }
            return subnet;
        }
        
        // 计算网络地址
        function calculateNetworkAddress(ip, subnet) {
            const network = [];
            for (let i = 0; i < 4; i++) {
                network.push(ip[i] & subnet[i]);
            }
            return network;
        }
        
        // 计算广播地址
        function calculateBroadcastAddress(network, subnet) {
            const broadcast = [];
            for (let i = 0; i < 4; i++) {
                broadcast.push(network[i] | (255 - subnet[i]));
            }
            return broadcast;
        }
        
        // 计算主机范围
        function calculateHostRange(network, broadcast) {
            // 如果是/32或/31，需要特殊处理
            const isPointToPoint = network.every((val, i) => val === broadcast[i]);
            if (isPointToPoint) {
                return `${network.join('.')}`;
            }
            
            // 计算第一个可用主机地址
            const firstHost = [...network];
            firstHost[3] += 1;
            
            // 计算最后一个可用主机地址
            const lastHost = [...broadcast];
            lastHost[3] -= 1;
            
            return `${firstHost.join('.')} - ${lastHost.join('.')}`;
        }
        
        // 计算可用主机数量
        function calculateHostCount(cidr) {
            if (cidr === 32) return 1; // 单播地址
            if (cidr === 31) return 2; // 点到点链路
            return Math.pow(2, 32 - cidr) - 2;
        }
        
        // 格式化二进制IP地址，标记网络部分和主机部分
        function formatBinaryIP(ipParts, cidr) {
            let binaryResult = '';
            let bitCount = 0;
            
            for (let i = 0; i < 4; i++) {
                const octetBinary = ipParts[i].toString(2).padStart(8, '0');
                
                for (let j = 0; j < 8; j++) {
                    bitCount++;
                    const isNetworkBit = bitCount <= cidr;
                    
                    if (isNetworkBit) {
                        binaryResult += `<span class="network-part">${octetBinary[j]}</span>`;
                    } else {
                        binaryResult += `<span class="host-part">${octetBinary[j]}</span>`;
                    }
                }
                
                if (i < 3) binaryResult += ' . ';
            }
            
            return binaryResult;
        }
        
        // 十进制转二进制
        function decimalToBinary() {
            const decimalInput = document.getElementById("decimal-input").value.trim();
            
            if (!decimalInput) {
                alert("请输入十进制数字！");
                return;
            }
            
            if (!/^\d+$/.test(decimalInput)) {
                alert("请输入有效的十进制数字！");
                return;
            }
            
            const decimal = parseInt(decimalInput);
            const binary = decimal.toString(2);
            
            document.getElementById("decimal-result").textContent = decimal;
            document.getElementById("binary-result").textContent = binary;
        }
        
        // 二进制转十进制
        function binaryToDecimal() {
            const binaryInput = document.getElementById("binary-input").value.trim();
            
            if (!binaryInput) {
                alert("请输入二进制数字！");
                return;
            }
            
            if (!/^[01]+$/.test(binaryInput)) {
                alert("请输入有效的二进制数字（仅包含0和1）！");
                return;
            }
            
            const decimal = parseInt(binaryInput, 2);
            
            document.getElementById("decimal-result").textContent = decimal;
            document.getElementById("binary-result").textContent = binaryInput;
        }
        
        // 清除所有输入和结果
        function clearAll() {
            document.getElementById("decimal-input").value = '';
            document.getElementById("binary-input").value = '';
            document.getElementById("decimal-result").textContent = '';
            document.getElementById("binary-result").textContent = '';
        }
        
        // 初始化 - 隐藏结果区域直到转换完成
        window.onload = function() {
            document.getElementById("ip-result-1").style.display = "none";
            document.getElementById("ip-result-2").style.display = "none";
            document.getElementById("ip-result-3").style.display = "none";
            document.getElementById("number-result").style.display = "none";
        }
        
        // 转换函数执行前显示结果区域已在convertIP函数内部实现
        
        decimalToBinary = (function(original) {
            return function() {
                document.getElementById("number-result").style.display = "block";
                original();
            };
        })(decimalToBinary);
        
        binaryToDecimal = (function(original) {
            return function() {
                document.getElementById("number-result").style.display = "block";
                original();
            };
        })(binaryToDecimal);
    </script>
</body>
</html>